// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use '../../utils' as f3;
@import '~@mozilla-protocol/core/protocol/css/includes/lib';

.c-public-wifi {
    background: f3.$blue-dark center / cover no-repeat url('/media/img/firefox/family/grid-curved.svg');

    @media (prefers-reduced-motion: no-preference) and (#{$mq-sm}) {
        background-attachment: fixed;
    }

    .c-module-tag-title {
        background-color: f3.$blue-primary;
    }

    .c-card.t-shadow {
        @include f3.card-shadow(f3.$violet-extra-dark);
    }

    .c-card.t-yellow {
        background-color: f3.$yellow-primary;
        max-width: 35ch;

        .c-subtitle {
            max-width: 10ch;
        }
    }

    .c-card {
        margin-bottom: $layout-2xs;

        &:last-of-type {
            margin-bottom: 0;
        }
    }
}

@supports (display: grid) {
    @media #{$mq-lg} {
        .c-public-wifi {
            .l-grid {
                display: grid;
                justify-content: space-between;
                align-items: center;
                grid-template-columns: minmax(20ch, 35ch) minmax(30%, 50%);
                gap: $layout-lg;
            }
        }
    }
}
